<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户登录状态切换组件</title>
  <script src="./js/vue.js"></script>
  <link rel="stylesheet" href="./css/denglu.css">
</head>
<body>
  <div id="app" class="container">
    <div class="card">
      <div class="card-header">
        <h1>用户登录状态</h1>
      </div>
      <div class="card-body">
        <!-- 登录状态指示器 -->
        <div class="status-indicator" :class="isLoggedIn ? 'status-online' : 'status-offline'">
          <div class="status-dot" :class="isLoggedIn ? 'dot-online' : 'dot-offline'"></div>
          {{ isLoggedIn ? '已登录' : '未登录' }}
        </div>
        
        <!-- 用户信息面板，使用v-show控制显示 -->
        <div class="user-info" v-show="isLoggedIn">
          <div class="avatar">
            <span>{{ currentUser.name.charAt(0) }}</span>
          </div>
          <div class="user-name">{{ currentUser.name }}</div>
          <div class="user-email">{{ currentUser.email }}</div>
        </div>
        
        <!-- 登录表单，使用v-show控制显示 -->
        <div class="login-form" v-show="!isLoggedIn">
          <div class="form-group">
            <label class="form-label">用户名</label>
            <input type="text" class="form-input" v-model="loginForm.username" placeholder="请输入用户名">
          </div>
          <div class="form-group">
            <label class="form-label">密码</label>
            <input type="password" class="form-input" v-model="loginForm.password" placeholder="请输入密码">
          </div>
        </div>
        
        <!-- 按钮区域 -->
        <div style="margin-top: 30px;">
          <!-- 登录按钮，使用v-show控制显示 -->
          <button class="btn btn-login" v-show="!isLoggedIn" @click="login">登录</button>
          
          <!-- 登出按钮，使用v-show控制显示 -->
          <button class="btn btn-logout" v-show="isLoggedIn" @click="confirmLogout">登出</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        // 确认是否已经登录
        isLoggedIn: false,
        currentUser: {
          name: '',
          email: ''
        },
        loginForm: {
          username: '',
          password: ''
        },
        // 注册用户数据
        registeredUsers: {}
      },
      created() {
        this.loadRegisteredUsers();
      },
      methods: {
        loadRegisteredUsers() {
          const users = localStorage.getItem('registeredUsers');
          if (users) {
            this.registeredUsers = JSON.parse(users);
          } else {
            this.registeredUsers = {};
          }
        },
        
        login() {
          if (!this.loginForm.username || !this.loginForm.password) {
            alert('请输入用户名和密码');
            return;
          }
          
          // 重新加载最新的用户数据
          this.loadRegisteredUsers();
          
          if (this.registeredUsers[this.loginForm.username]) {
            const userData = this.registeredUsers[this.loginForm.username];
            
            if (userData.password === this.loginForm.password) {
              this.isLoggedIn = true;
              this.currentUser = {
                name: userData.username,
                email: userData.email
              };
              alert('登录成功！');
            } else {
              alert('密码错误！请重新输入！');
              this.loginForm.password = '';
            }
          } else {
            alert('用户名不存在！');
            this.loginForm.password = '';
          }
        },
        
        confirmLogout() {
          if (confirm('确定要登出吗？')) {
            this.logout();
          }
        },
        
        logout() {
          this.isLoggedIn = false;
          this.loginForm.username = '';
          this.loginForm.password = '';
          this.currentUser = {
            name: '',
            email: ''
          };
        }
      }
    });
  </script>
